<template>
    <div class="labelWrap">
        <template v-if="!type">
            {{ value }}
        </template>
        <!-- 文本、日期都是直接展示 -->
        <template v-else-if="['TextareaField', 'DDDateField'].includes(type)">
            {{ value }}
        </template>
        <!-- 像部门 -->
        <template v-else-if="['DDMultiSelectField'].includes(type)">
            {{ convert(value) }}
        </template>
        <!-- 手写签名 -->
        <!-- 单图 -->
        <template v-else-if="['SignatureField'].includes(type)">
            <a-row :gutter="[8, 8]" style="width: 100%;">
                <!-- <viewer>
                    <a-col :span="8">
                        <img :src="value" class="img" />
                    </a-col>
                </viewer> -->
                <ShowBase :value="value"></ShowBase>
            </a-row>
        </template>
        <!-- 多图 -->
        <template v-else-if="['DDPhotoField'].includes(type)">
            <viewer>
                <a-row :gutter="[8, 8]" style="overflow: hidden;width: 100%;">
                    <a-col :span="8" v-for="(src, index) of imgConvert(value)" :key="index">
                        <img :src="src" class="img" />
                    </a-col>
                </a-row>
            </viewer>
        </template>
    </div>
</template>
<script>
import ShowBase from '@/components/ShowBase/ShowBase';
export default {
    name: 'ZsLabel',
    components: {
        ShowBase
    },
    props: {
        item: {
            type: [String, Object, Array, Number],
        },
        value: {
            type: [String, Object, Array, Number],
        },
        type: {
            type: [String, Number],
        }
    },
    mounted() {
    },
    methods: {
        convert(value) {
            let res;
            if (value) {
                res = JSON.parse(value);
            }
            if (Array.isArray(res)) {
                res = res.join(',');
            }
            return res;
        },
        // 多图处理，后端返回json串
        imgConvert(val) {
            let arr = [];
            if (val) {
                arr = JSON.parse(val);
            }
            return arr;
        }
    }
}
</script>
<style lang="less" scoped>
.labelWrap {
    width: 100%;
}

.img {
    width: 100%;
}
</style>